// 导入公共的common.less文件
@import "common";


/* 给 body 进行样式初始化 */
body {
    min-width: 320px;
    max-width: 540px;
    margin: 0 auto;
    background-color: #fff;
    font-size: 14px;
    line-height: 1.5;
    font-family: -apple-system,Helvetica,sans-serif;
    // overflow-x: hidden;
  }
  ol,ul {
    list-style: none;
  }
  /*点击高亮我们需要清除清除 设置为transparent 完成透明*/
  *{
    -webkit-tap-highlight-color: transparent;
  }
  /*在移动端浏览器默认的外观在iOS上加上这个属性才能给按钮和输入框自定义样式*/
  input{
    -webkit-appearance: none;
  }
  /*禁用长按页面时的弹出菜单*/
  img,a { -webkit-touch-callout: none; }
  
  /* 制作顶部提示部分 */
  .top-tips {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 45px;
    background-color: #333333;
    line-height: 45px;
    text-align: center;
    color: #fff;
  }
  .top-tips div:nth-child(1) {
    float: left;
    width: 8%;
  }
  .top-tips div:nth-child(1) img {
    width: 10px;
    vertical-align: middle;
  }
  .top-tips div:nth-child(2) {
    float: left;
    width: 10%;
  }
  .top-tips div:nth-child(2) img {
    width: 30px;
    vertical-align: middle;
  }
  .top-tips div:nth-child(3) {
    float: left;
    width: 57%;
  }
  .top-tips div:nth-child(4) {
    float: left;
    width: 25%;
    height: 45px;
    background-color: #f63515;
  }
  
  /* 搜索框 */
  .search-box {
    position: fixed;
    top: 45px;
    left: 0;
    width: 100%;
    height: 44px;
    z-index: 20;
  } 
  .search-box .search-btn {
    position: absolute;
    left: 0;
    top: 0;
    width: 40px;
    height: 44px;
  }
  .search-box .search-btn span {
    display: block;
    width: 20px;
    height: 18px;
    margin: 14px 0 0 15px;
    background: url(../images/s-btn.png) no-repeat 0 0;
    background-size: 20px 18px;
  }
  .search-box .login {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: 44px;
    line-height: 44px;
    color: #fff;
    text-align: left;
  }
  .search-box .search {
    position: relative;
    height: 30px;
    margin: 7px 50px;
    border-radius: 15px;
    background-color: #fff;
  }
  .search-box .search span {
    float: left;
    position: relative;
    width: 20px;
    height: 15px;
    margin: 8px 8px 0 15px;
    background: url(../images/logo2.png) no-repeat 0 0;
    background-size: 20px 15px;
  }
  .search-box .search span::after {
    position: absolute;
    right: -8px;
    content:"";
    width: 1px;
    height: 15px;
    background-color: #ccc;
  }
  .search-box .search i {
    float: left;
    width: 18px;
    height: 15px;
    margin: 8px 0 0 15px;
    background: url(../images/jd-sprites.png) no-repeat -82px 0;
     background-size: 200px 200px;
  }
  .search-box .search input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 30px;
    padding: 0 20px 0 78px;
    border: none;
    background-color: transparent;
    font-size: 12px;
  }
  
  /* 主要内容区域 */
  .content {
    width: 100%;
    margin-top: 45px;
    background-color: #f6f6f6;
  }
  
  /* 焦点图区域 */
  .banner {
    position: relative;
    width: 100%;
    height: 187px;
    overflow: hidden;
  }
  .banner .banner-bg {
    position: absolute;
    left: -25%;
    width: 150%;
    height: 145px;
    border-bottom-left-radius: 100%;
    border-bottom-right-radius: 100%;
    /* background-color: #f00; */
    /* background-image: linear-gradient(to top, #f00, #0f0 25% 50%, #00f); */
    background-image: linear-gradient(0deg,#f1503b,#c82519 50%);
  }
  
  /* 设置滑动轮播图的样式 */
  .banner ul {
    position: relative;
    /* width: 100%; */
    list-style: none;
    margin: 0;
  
  }
  .banner ul li {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 187px;
    padding: 44px 3.33% 0; 
    box-sizing: border-box;
  }
  .banner ul li:nth-child(2) {
    left: 100%;
  }
  .banner ul li:nth-child(3) {
    left: 200%;
  }
  .banner ul li a {
    display: block;
  }
  .banner ul li a img {
    display: block;
    width: 100%; 
    border-radius: 10px;
  }
  /* 优惠活动部分 */
  .youhui {
    width: 100%;
    overflow: hidden;
  }
  .youhui a {
    float: left;
    width: 33.333%;
  }
  .youhui a img {
    display: block;
    width: 100%;
  }
  
  /* 导航部分 */
  nav {
    position: relative;
    width: 100%;
    height: 162px;
    overflow: hidden;
  }
  nav .mall-nav {
    position: absolute;
    left: 0; 
    width: 100%;
    height: 100%;
    overflow: hidden;
  }
  nav .mall-nav-2 {
    left: 100%;
  }
  nav .mall-nav a {
    float: left;
    width: 20%;
    color: #666666;
    text-decoration: none;
    text-align: center;
    font-size: 12px;
  }
  nav .mall-nav a img {
    display: block;
    width: 40px;
    margin: 10px auto 0;
  }
  nav .mall-nav a span {
    display: block;
    height: 18px;
    margin-top: 6px;
    line-height: 18px;
  }
  
  /* 新人专享区域 */
  .new {
    margin: 10px;
    overflow: hidden;
  }
  .new a {
    float: left;
    width: 50%;
  }
  .new a img {
    display: block;
    width: 100%;
  }
  
  /* 京东秒杀区域 */
  // 后续的尺寸都需要使用 rem 单位
  @baseFont: 25px;
  .seckill {
    width: 100%;
    overflow: hidden;
    font-size: 0%;
    .s-c {
      margin: (10rem / @baseFont);
      .seckill-the-container {
        width: 100%;
        font-size: 0;
        overflow: hidden;
        .seckill-container {
          background: #fff;
          border-radius: .6rem;
          overflow: hidden;
          .seckill-title {
            background: url(../images/ydbj.png) no-repeat;
            background-size: contain;
            height: 1.7rem;
            line-height: 1.7rem;
            vertical-align: middle;
            .left-text {
              text-decoration: none;
              float: left;
              .text {
                float: left;
                display: inline-block;
                height: (27rem / @baseFont);
                margin: (8rem / @baseFont) (5rem / @baseFont) 0 (10rem / @baseFont);
                font-family: PingFangSC-Semibold;
                font-size: (14rem / @baseFont);
                color: #333;
                line-height: 1.2;
              }
              .text-time {
                display: inline-block;
                border-radius: .4rem;
                height: (18rem / @baseFont);
                line-height: (18rem / @baseFont);
                font-size: 0;
                float: left;
                margin-top: (8rem / @baseFont);
                vertical-align: middle;
                .time {
                  height: 100%;
                  border-radius: .4rem;
                  font-size: (13rem / @baseFont);
                  color: #ff2727;
                  letter-spacing: 0;
                  padding: 0 (5rem / @baseFont);
                  float: left;
                  position: relative;
                  left: -1px;
                  margin-right: (4rem / @baseFont);
                  line-height: 1.4;
                }
                .time:after {
                  height: (17.5rem / @baseFont);
                  width: (20.5rem / @baseFont);
                  content: "";
                  display: inline-block;
                  vertical-align: middle;
                  background-image: url(../images/dianc.png);
                  background-repeat: no-repeat;
                  background-position: 50%;
                  background-size: contain;
                }
                .time-z {
                  float: right;
                  width: (57rem / @baseFont);
                  height: (18rem / @baseFont);
                  margin-right: (4rem / @baseFont);
                  .h {
                    float: left;
                    width: (15rem / @baseFont);
                    font-size: (12rem / @baseFont);
                    color: #fff;
                    background-color: #fa2c19;
                    border-radius: .2rem;
                    text-align: center;
                    font-weight: 400;
                  }
                  .yh {
                    float: left;
                    display: inline-block;
                    height: 100%;
                    width: (6rem / @baseFont);
                    line-height: 1.4;
                    font-size: (12rem / @baseFont);
                    text-align: center;
                    font-family: PingFangSC-Regular;
                    color: #f2270c;
                    letter-spacing: 0;
                    font-weight: 700;
                  }
                  .m {
                    float: left;
                    width: (15rem / @baseFont);
                    font-size: (12rem / @baseFont);
                    color: #fff;
                    background-color: #fa2c19;
                    border-radius: .2rem;
                    text-align: center;
                    font-weight: 400;
                  }
                  .s {
                    float: left;
                    width: (15rem / @baseFont);
                    font-size: (12rem / @baseFont);
                    color: #fff;
                    background-color: #fa2c19;
                    border-radius: .2rem;
                    text-align: center;
                    font-weight: 400;
                  }
                }
              }
            }
            .right-text {
              display: inline-block;
              color: #f23030;
              float: right;
              font-size: (12rem / @baseFont);
              text-align: right;
              position: relative;
              padding-right: (22rem / @baseFont);
              text-decoration: none;
              .right-i {
                display: inline-block;
                width: (11rem / @baseFont);
                height: (11rem / @baseFont);
                background: url(../images/jtou.png) no-repeat;
                background-size: cover;
                position: absolute;
                right: .35rem;
                top: .57rem;
                }
            }
          }
          .seckill-goods {
            overflow: hidden;
            margin: 0 (6.25rem / @baseFont);
            .goods-ul {
              position: relative;
              background-color: #fff;
              padding: 0;
              .goods-li {
                float: left;
                width: (57rem / @baseFont);
                height: (103rem / @baseFont);
                .li-top {
                  width: (55rem / @baseFont);
                  height: (55rem / @baseFont);
                  padding: 0 (1rem / @baseFont);
                  .li-top-a {
                    text-decoration: none;
                    img {
                      width: 100%;
                      height: auto;
                      overflow: hidden;
                      min-height: 1px;
                      min-width: 1px
                    }
                  }
                }
                .li-bottom {
                  width: (55rem / @baseFont);
                  height: (37.95rem / @baseFont);
                  padding: 0 (1rem / @baseFont);
                  .bottom-one {
                    font-family: JDZhengHT-EN-Regular;
                    margin-top: (10rem / @baseFont);
                    display: block;
                    line-height: (12rem / @baseFont);
                    height: (12rem / @baseFont);
                    text-align: center;
                    em {
                      width: (10rem / @baseFont);
                      height: (12rem / @baseFont);
                      font-size: (12rem / @baseFont);
                      color: #f2270c;
                      padding-right: (2rem / @baseFont);
                      text-align: center;
                    }
                    .span-s {
                      width: (18rem / @baseFont);
                      height: (13rem / @baseFont);
                      font-size: (13rem / @baseFont);
                      line-height: (13rem / @baseFont);
                      color: #f2270c;
                      text-align: center;
                    }
                  }
                  .bottom-two {
                    position: relative;
                    font-family: JDZhengHT-EN-Regular;
                    color: #999;
                    line-height: (11rem / @baseFont);
                    margin: (4rem / @baseFont) 0 (11rem / @baseFont);
                    padding: 0 (2rem / @baseFont);
                    display: inline-block;
                    text-align: center;
                    em {
                      width: (7rem / @baseFont);
                      height: (15rem / @baseFont);
                      font-size: (12rem / @baseFont);
                      padding-right: (2rem / @baseFont);
                      text-align: center;
                      line-height: (15rem / @baseFont);
                      color: #999;
                    }
                    .span-s {
                      width: (24rem / @baseFont);
                      height: (15rem / @baseFont);
                      color: #999;
                      font-size: (12rem / @baseFont);
                      line-height: .6rem;
                      text-align: center;
                      display: inline-block;
                      position: relative;
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }

  // 为你推荐区域
  .for-love {
    width: 100%;
    margin: 0 10px;
    color: #666;
    background-color: #f7f7f7;
    overflow: hidden;
    .for-u {
      padding-left: 0;
      margin: 0;
      .love-u {
        float: left;
        width: 50%;
        box-sizing: border-box;
        padding: 0 5px 10px 0;
        .li-a {
          text-decoration: none;
          .a-container {
            background-color: #fff;
            font-size: 0;
            padding-bottom: 0;
            border-radius: .4rem;
            overflow: hidden;
            .a-top {
              position: relative;
              img {
                opacity: 1;
                width: 173px;
                height: 173px
              }
            }
            .s-wenzi {
              box-sizing: border-box;
              height: 31px;
              font-size: 13px;
              overflow: hidden;
              text-overflow: ellipsis;
              display: -webkit-box;
              -webkit-line-clamp: 2;
              -webkit-box-orient: vertical;
              word-break: break-all;
              color: #1a1a1a;
              margin-top: 5px;
              line-height: 16px;
              margin-bottom: 3px;
              padding: 0 4px;
              img {
                height: 13px;
                display: inline-block;
                position: relative;
                top: 0;
                margin-right: 4px;
              }
            }
            .a-p {
              font-size: 13px;
              overflow: hidden;
              position: relative;
              margin: 0;
              height: 26px;
              .p-t {
                color: #fa2c19;
                display: inline-block;
                padding: 0 5px 0 4px;
                position: relative;
                top: 1px;
                width: 48px;
                height: 25px;
                line-height: 25px;
                font-family: JDZhengHT-EN-Regular;
                .yuan {
                  width: 13px;
                  height: 13px;
                }
                .mauch {
                  width: 26px;
                  height: 16px;
                  font-size: 16px;
                }
              }
              .p-b {
                border: 1px solid #fa2c19;
                color: #fa2c19;
                font-size: 12px;
                padding: 0 3px;
                margin-right: 5px;
                line-height: 14px;
                height: 14px;
                border-radius: .1rem;
              }
              .p-look {
                display: block;
                position: absolute;
                top: .15rem;
                right: -.3em;
                text-align: center;
                color: grey;
                font-size: 12px;
                height: 1.1rem;
                line-height: 1.1rem;
                padding: 0 .5em;
                background-color: #f0f2f5;
                border-radius: .55rem;
                border-top-right-radius: 0;
                border-bottom-left-radius: 0;
              }
            }
            .p-k {
              font-size: 13px;
              overflow: hidden;
              position: relative;
              height: 26px;
              margin: 0;
            }
          }
        }
      }
      .nbt {
        padding: 0 0 10px 5px;
      }
    }
  }

  // 底部固定footer区域
  .footer {
    display: flex;
    justify-content: center;
    position: fixed;
    margin: 0;
    padding: 0;
    left: 0;
    bottom: 0;
    z-index: 31;
    box-sizing: border-box;
    width: 100%;
    list-style: none;
    background-color: #fff;
    .footer-a {
      flex:1;
      padding: 0 5px;
      width: 100%;
      img {
        display: block;
        width: 60px;
        height: 46px;
      }
    }
  }